<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../font/iconfont.js"></script>

    <link rel="stylesheet" href="./all.css">
    <script src="https://hammerjs.github.io/dist/hammer.js"></script>
    <link rel="stylesheet" href="../swiper/swiper-bundle.min.css">
    <script src="../swiper/swiper-bundle.min.js"></script>
    <title>首页</title>
    <style>
        .bnav>li:first-child p {
            color: rgb(253, 102, 153);
        }

        html {
            font-size: 62.5%;
        }

        body {
            background-color: rgb(241, 242, 244);
            margin-top: 9rem;
            margin-bottom: 5.5rem;
        }

        .tnav {
            width: 120%;
            display: flex;
            position: fixed;
            top: 5rem;
            right: -7rem;
            background-color: #fff;
            z-index: 5;
            padding-top: .04rem;
            box-shadow: 0 .1rem 1rem #ccc;
            justify-content: space-around;
            overflow-x: scroll;
            overflow-y: hidden;
            transition: all .6s;
        }

        .swipeleft {
            position: fixed;
            top: 5rem;
            right: 0;
        }

        .tnav::-webkit-scrollbar {
            display: none
        }

        .tnav>li {
            width: 10%;
            height: 4.3rem;

        }

        .tnav li:nth-child(6) {
            width: 21%;
        }

        .tnav li:nth-child(6) p {
            text-align: left;
            /* width: 68%; */
        }

        .tnav p {
            font-size: 1.6rem;
            line-height: 4rem;
            text-align: center;
        }

        .tuijian p {
            color: rgb(253, 102, 153);
            border-bottom: 30rem solid rgb(253, 102, 153);
        }

        .tnav+div {
            position: fixed;
            top: 6rem;
            right: 0;
            z-index: 11;
            background-color: rgba(255, 255, 255, .9);
            text-align: center;
            box-shadow: -.5rem 0 .5rem #fff;
        }

        .tnav+div>svg {
            font-size: 2rem;
            line-height: 4.4rem;
        }

        .top {
            width: 100%;
            display: flex;
            align-items: center;
            position: fixed;
            top: 0rem;
            left: 0rem;
            background-color: #fff;
            padding-top: 1rem;
            z-index: 6;

        }

        .top img {
            width: 4rem;
            height: 4rem;
            margin-left: 1rem;
            padding-bottom: .1rem;
            border-radius: 50%;
        }

        .top>li:nth-child(2) {
            flex-grow: 1;
            margin-left: 2rem;
        }

        .top>li:nth-child(3) img {
            width: 3rem;
            height: 3rem;
            padding-bottom: .1rem;
            border-radius: 50%;
            margin-right: 2rem;
        }

        .top>li:nth-child(4)>svg {
            font-size: 2.5rem;
            padding-right: 2.5rem;
        }

        .top>li:nth-child(5)>svg {
            font-size: 2.5rem;
            padding-right: 1rem;
        }

        .top>li:nth-child(2) svg {
            height: 3rem;
            font-size: 2rem;
            color: rgb(169, 172, 177);
            background-color: rgb(241, 242, 244);
        }

        .top>li>div {
            display: flex;
            align-items: center;
            background-color: rgb(241, 242, 244);
            border-radius: 2rem;
            padding: 0 1.2rem;
            margin-right: 1rem;
        }

        #search {
            width: 2rem;
            height: 3rem;
            border: none;
            outline: none;
            background-color: rgb(241, 242, 244);
            flex-grow: 1;
        }

        .tabwrapper>div {
            display: none;
        }

        .swiperarea {
            width: 100%;
            height: 40rem;
            position: fixed;
            bottom: 5rem;
            left: 0;
            z-index: 11;
        }

        .tabwrapper>div.show {
            display: block;
        }

        .rank-list {
            height: 9rem;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .rank {
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }

        .rank svg {
            width: 100%;
            font-size: 3.5rem;
            margin-bottom: .5rem;
        }

        .rank p {
            width: 100%;
            height: 2.2rem;
            font-size: 1.4rem;
            line-height: 2.2rem;
            text-align: center;
        }

        .bg {
            height: 11rem;
            background-color: #fff;
        }

        .wrapper {
            height: 11rem;
            margin-left: .8rem;

            display: flex;
            align-items: center;
            border-top: solid .05rem rgb(240, 238, 238);
        }

        .first {
            border: none;
        }

        .image {
            position: relative;

        }

        .image>img {
            width: 17rem;
            height: 9.7rem;
            border-radius: .5rem;
        }

        .time {
            width: 3.6rem;
            font-size: 1.1rem;
            line-height: 1.5rem;
            color: #fff;
            border-radius: .3rem;
            text-align: center;
            position: absolute;
            right: .4rem;
            bottom: .6rem;
            background: rgba(0, 0, 0, .5);
        }

        .content {
            width: 26rem;
            height: 10rem;
            margin-left: .8rem;
            margin-right: .8rem;
            position: relative;
        }

        .tar {
            font-size: 1.4rem;
            line-height: 2rem;
            height: 3.6rem;
            overflow: hidden;
            margin-top: .1rem;
        }

        .tag {
            width: 5rem;
            height: 1.6rem;
            text-align: center;
            font-size: 1.1rem;
            color: orange;
            border: .1rem solid orange;
            border-radius: .2rem;
            margin-top: .7rem;
        }

        .up {
            display: flex;
            align-items: center;
            color: rgb(169, 172, 177);
            position: absolute;
            left: 0;
            bottom: 2rem;
        }

        .up svg {
            font-size: 1.7rem;

        }

        .up p {
            font-size: 1.2rem;
            letter-spacing: .1rem;
            margin-left: .3rem;
        }

        .play {
            width: 100%;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            color: rgb(169, 172, 177);
            margin-top: .2rem;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .play>li:nth-of-type(2) {
            flex-grow: 1;
        }

        .play>li:nth-of-type(2) svg {
            font-size: 1.3rem;
            float: right;
        }

        .play svg {
            font-size: 1.7rem;
        }

        .play p {
            font-size: 1.2rem;
            width: 12.3rem;
            height: 1.7rem;
            float: right;
            margin-top: .1rem;
            margin-left: .2rem;
            flex-grow: 1;
            overflow: hidden;
        }

        .box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

        }

        .box>li {
            width: 47%;
            height: 16.5rem;
            background-color: #fff;
            margin-top: .8rem;
            border-radius: 3%;
            position: relative;
        }

        .box>li:nth-child(1) {
            width: 98%;
            height: 19.5rem;
        }

        .box img {
            width: 100%;
            height: 9.7rem;
            background-color: #fff;
            border-radius: 3% 3% 0 0;
        }

        .box>li:nth-child(1) img {
            width: 100%;
            height: 100%;
            border-radius: 3%;
        }

        .text {
            width: 100%;
            position: absolute;
            left: 0;
            top: 8rem;
            display: flex;
            align-items: center;
        }

        .text svg {
            font-size: 1.5rem;
            color: #fff;
            line-height: 1.6rem;
            margin-left: .4rem;
            margin-bottom: .02rem;
        }

        .text span {
            font-size: 1rem;
            color: #fff;
            line-height: 1.6rem;
            margin-left: .2rem;
        }

        .text span:nth-of-type(2) {
            flex-grow: 1;
        }

        .text span:nth-of-type(3) {
            margin-right: .5rem;
        }

        .box p {
            font-size: 1.2rem;
            margin: .5rem 1rem .5rem .5rem;
            letter-spacing: .1rem;
            line-height: 1.8rem;
            height: 3.6rem;
            overflow: hidden;
        }

        .box li>a>svg:nth-of-type(1) {
            font-size: 1.4rem;
            color: rgb(148, 153, 157);
            position: absolute;
            left: .5rem;
            bottom: .4rem;
        }

        .box li>a>svg:nth-of-type(2) {
            font-size: 1rem;
            color: rgb(148, 153, 157);
            position: absolute;
            right: .5rem;
            bottom: .5rem;
        }

        .box li>a>span {
            color: rgb(148, 153, 157);
            font-size: 1rem;
            position: absolute;
            left: 2.5rem;
            bottom: .5rem;
        }

        .box>li .swiper-wrapper {
            height: 19.5rem;
        }

        .box>li .swiper-wrapper img {
            border-radius: 5px;

        }

        a:hover:active {
            display: block;
            background-color: rgba(0, 0, 0, .5);
        }

        .swiper-horizontal>.swiper-pagination-bullets,
        .swiper-pagination-bullets.swiper-pagination-horizontal,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            left: 85%;
            bottom: .5rem;
            width: 15%;

        }

        .box>li>.swiper .swiper-pagination-bullet {
            width: .6rem;
            height: .6rem;
            margin: 0 .2rem;
            background-color: rgba(255, 255, 255, .9);
        }

        .swiper-pagination-bullet-active {
            background-color: #fff;
        }

        .swiper-slide {
            position: relative;
        }

        .swiper-slide p {
            height: 2rem;
            color: #fff;
            font-size: 1.4rem;
            line-height: 1.8rem;
            position: absolute;
            left: 0.2rem;
            bottom: 0;
        }

        #zhibo {
            width: 96%;
            height: 13rem;

        }

        #zhibo img {
            width: 100%;
            height: 11.6rem;
            margin-top: 1.5rem;
            border-radius: 5px;
        }

        /* 幻灯片小点 其他 */
        #zhibo .swiper-pagination-bullet {
            width: .6rem;
            height: .6rem;
            margin: 0 .2rem;
            background-color: #fff;
            opacity: 1;
        }

        /* 幻灯片小点 选中 */
        #zhibo .swiper-pagination-bullet-active {
            background-color: rgb(253, 102, 153);
        }

        #zhibo .swiper-horizontal>.swiper-pagination-bullets,
        .swiper-pagination-bullets.swiper-pagination-horizontal,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            bottom: 0.2rem;
        }

        #zhuifan ,#yingshi{
            width: 96%;
            height: 20rem;
        }

        #zhuifan img ,#yingshi img{
            width: 100%;
            height: 17.6rem;
            margin-top: 1.5rem;
            border-radius: 5px;
        }
        #zhuifan p,#yingshi p{
            left: .5rem;
            bottom: 1.6rem;
        }

        /* 幻灯片小点 其他 */
        #zhuifan .swiper-pagination-bullet ,#yingshi .swiper-pagination-bullet{
            width: .6rem;
            height: .6rem;
            margin: 0 .2rem;
            background-color: #000;
        }

        /* 幻灯片小点 选中 */
        #zhuifan .swiper-pagination-bullet-active ,#yingshi .swiper-pagination-bullet-active{
            background-color: rgb(253, 102, 153);
        }
        #zhuifan ,#yingshi{
            height: 20.5rem;
        }
        #zhuifan .swiper-horizontal>.swiper-pagination-bullets,
        #zhuifan .swiper-pagination-bullets.swiper-pagination-horizontal,
        #zhuifan .swiper-pagination-custom,
        #zhuifan .swiper-pagination-fraction {
            width: 16%;
            left: 15rem;
            bottom: 0;
        }
        #yingshi .swiper-horizontal>.swiper-pagination-bullets,
        #yingshi .swiper-pagination-bullets.swiper-pagination-horizontal,
        #yingshi .swiper-pagination-custom,
        #yingshi .swiper-pagination-fraction {
            width: 16%;
            left: 15rem;
            bottom: 0;
        }
        .tabwrapper>div:last-child>p{
            font-size: 2rem;
            color: #ccc;
            height: 10rem;
            text-align: center;
            line-height: 10rem;
        }
    </style>
</head>

<body>
    <ul class="top">
        <li>
            <img src="../img/bilibili1/liuhaizhu.jpg" alt="">
        </li>
        <li>
            <div>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-sousuo"></use>
                </svg>
                <input type="search" id="search" name="search" placeholder="大连东软">
            </div>
        </li>
        <li>
            <a href="#"><img src="../img/bilibili1/EDGNB.png" alt=""></a>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-youxiji"></use>
            </svg>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jichutubiao-XC-xinjian"></use>
            </svg>
        </li>
    </ul>
    <ul class="tnav">
        <li>
            <p>直播</p>
        </li>
        <li class="tuijian">
            <p>推荐</p>
        </li>
        <li>
            <p>热门</p>
        </li>
        <li>
            <p>追番</p>
        </li>
        <li>
            <p>影视</p>
        </li>
        <li>
            <p>建党百年</p>
        </li>
    </ul>
    <div>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gengduo"></use>
        </svg>
    </div>
    <div class="tabwrapper">
        <div>
            <div class="swiper" id="zhibo">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href=""><img src="../img/bilibili1/online/单机区 舰队破冰大挑战！.jpg" alt="单机区 舰队破冰大挑战！"></a>

                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="../img/bilibili1/online/李小龙神还原挑战.jpg" alt="李小龙神还原挑战"></a>

                    </div>
                    <div class="swiper-slide">
                        <a href=""><img src="../img/bilibili1/online/群星计划.jpg" alt="群星计划"></a>
                    </div>
                </div>

                <div class="swiper-pagination"></div>
            </div>
            <!-- 用来规定滑动切换的范围，防止和幻灯片冲突 -->
            <div class="swiperarea"></div>
        </div>
        <div class="show">
            <ul class="box">
                <li>
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a href=""><img src="../img/bilibili1/B站线上.jpg" alt="B站线上"></a>
                                <p>19001010112杨博文</p>
                            </div>
                            <div class="swiper-slide">
                                <a href=""><img src="../img/bilibili1/当公主变身特工——.jpg" alt="当公主变身特工——"></a>
                                <p>当公主变身特工——</p>
                            </div>
                            <div class="swiper-slide">
                                <a href=""><img src="../img/bilibili1/消防员出动！惊心动魄的生死时刻！.jpg" alt="消防员出动！惊心动魄的生死时刻！"></a>
                                <p>消防员出动！惊心动魄的生死时刻！</p>
                            </div>
                            <div class="swiper-slide">
                                <a href=""><img src="../img/bilibili1/快来和2233一起穿越千年，寻梦敦煌!.jpg"
                                        alt="快来和2233一起穿越千年，寻梦敦煌!"></a>
                                <p>快来和2233一起穿越千年，寻梦敦煌!</p>
                            </div>
                        </div>

                        <div class="swiper-pagination"></div>
                    </div>
                </li>
                <!-- 用来规定滑动切换的范围，防止和幻灯片冲突 -->
                <div class="swiperarea"></div>
            </ul>
        </div>
        <div>
            <div class="rank-list">

                <div class="rank row">
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-paihangbang"></use>
                        </svg>
                    </a>
                    <p>排行榜</p>
                </div>

                <div class="rank week">
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-certificates"></use>
                        </svg>
                    </a>
                    <p>每周必看</p>
                </div>


                <div class="rank station">
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jiangpai1"></use>
                        </svg>
                    </a>
                    <p>入站必刷</p>
                </div>


                <div class="rank cut">
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-dianshi"></use>
                        </svg>
                    </a>
                    <p>必剪热榜</p>
                </div>

            </div>
            <div class="hott">


            </div>
            <!-- 用来规定滑动切换的范围，防止和幻灯片冲突 -->
            <div class="swiperarea"></div>
        </div>
        <div>
            <div class="swiper" id="zhuifan">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <a href=""><img src="../img/bilibili1/fanju/进化之实.png" alt="进化之实"></a>
                    <p>进化之实 踏上胜利的人生</p>
                  </div>
                  <div class="swiper-slide">
                    <a href=""><img src="../img/bilibili1/fanju/名侦探柯南.png" alt="名侦探柯南"></a>
                    <p>名侦探柯南</p>
                  </div>
                  <div class="swiper-slide">
                    <a href=""><img src="../img/bilibili1/fanju/博人传 火影忍者新时代.png" alt="博人传 火影忍者新时代"></a>
                    <p>博人传 火影忍者新时代</p>
                  </div>
                  <div class="swiper-slide">
                    <a href=""><img src="../img/bilibili1/fanju/大正少女御伽话.png"
                            alt="大正少女御伽话"></a>
                    <p>大正少女御伽话</p>
                </div>
                </div>
        
                <div class="swiper-pagination"></div>
              </div>
            <!-- 用来规定滑动切换的范围，防止和幻灯片冲突 -->
            <div class="swiperarea"></div>
        </div>
        <div>
            <div class="swiper" id="yingshi">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <a href=""><img src="../img/bilibili1/yingshi/如果王家卫拍谭谈交通2.0.jpg" alt="如果王家卫拍谭谈交通2.0"></a>
                    <p>如果王家卫拍谭谈交通2.0</p>
                  </div>
                  <div class="swiper-slide">
                    <a href=""><img src="../img/bilibili1/yingshi/人生一串.png" alt="人生一串"></a>
                    <p>人生一串</p>
                  </div>
                  <div class="swiper-slide">
                    <a href=""><img src="../img/bilibili1/yingshi/火线救援.jpg" alt="火线救援"></a>
                    <p>火线救援</p>
                  </div>
                  <div class="swiper-slide">
                    <a href=""><img src="../img/bilibili1/yingshi/皮皮鲁与鲁西西之罐头小人.png"
                            alt="皮皮鲁与鲁西西之罐头小人"></a>
                    <p>皮皮鲁与鲁西西之罐头小人</p>
                </div>
                </div>
        
                <div class="swiper-pagination"></div>
              </div>
            <!-- 用来规定滑动切换的范围，防止和幻灯片冲突 -->
            <div class="swiperarea"></div>
        </div>
        <div>
            <p>敬请期待！！！</p>
            <!-- 用来规定滑动切换的范围，防止和幻灯片冲突 -->
            <div class="swiperarea"></div>
        </div>
    </div>
    <ul class="bnav">
        <li>
            <a href="./bilibili1.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wode-copy"></use>
                </svg>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="./bilibili2.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dongtai"></use>
                </svg>
                <p>动态</p>
            </a>
        </li>
        <li>
            <a href="#">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-plus-full-copy"></use>
                </svg>
            </a>
        </li>
        <li>
            <a href="./bilibili3.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gouwudai"></use>
                </svg>
                <p>会员购</p>
            </a>
        </li>
        <li>
            <a href="./bilibili4.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wodewo"></use>
                </svg>
                <p>我的</p>
            </a>
        </li>
    </ul>
    <script>
        var swiper = new Swiper(".mySwiper", {
            pagination: {
                el: ".swiper-pagination",
            },
            loop: true,
            autoplay: {
                delay: 2000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
        });
        var swiper1 = new Swiper("#zhibo", {
            pagination: {
                el: ".swiper-pagination",
            },
            loop: true,
            autoplay: {
                delay: 2000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
        });
        var swiper2 = new Swiper("#zhuifan", {
            pagination: {
                el: ".swiper-pagination",
            },
            loop: true,
            autoplay: {
                delay: 2000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
        });
        var swiper2 = new Swiper("#yingshi", {
            pagination: {
                el: ".swiper-pagination",
            },
            loop: true,
            autoplay: {
                delay: 2000,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
        });


        var tnav = document.querySelector(".tnav");
        var hammertnav = new Hammer(tnav);
        hammertnav.on("swipeleft", function () {
            tnav.classList.add("swipeleft");
        })
        hammertnav.on("swiperight", function () {
            tnav.classList.remove("swipeleft");
        })


        var lm = tnav.getElementsByTagName("li");
        var sh = document.querySelectorAll(".tabwrapper>div");
        var area = document.querySelectorAll(".swiperarea");
        for (var i = 0; i < lm.length; i++) {
            lm[i].index = i;
            lm[i].onclick = function () {
                //顶部变化
                for (var j = 0; j < lm.length; j++) {
                    lm[j].classList.remove("tuijian");
                }
                this.classList.add("tuijian");
                //内容变化
                for (var k = 0; k < lm.length; k++) {
                    sh[k].classList.remove("show");
                }
                sh[this.index].classList.toggle("show");
            }
        }

        for (let i = 0; i < area.length; i++) {

            var hammertnav = new Hammer(area[i]);
            hammertnav.on("swipeleft", function () {
                if (i + 2 == 3||i + 1 == 5) {
                    tnav.classList.add("swipeleft");
                }

                //顶部变化
                for (var j = 0; j < lm.length; j++) {
                    lm[j].classList.remove("tuijian");
                }
                if (i + 1 >= sh.length) {
                    lm[5].classList.add("tuijian");

                } else {
                    lm[i + 1].classList.add("tuijian");
                }
                //内容变化
                for (var k = 0; k < lm.length; k++) {
                    sh[k].classList.remove("show");
                }
                if (i + 1 >= sh.length) {
                    sh[5].classList.add("show");
                } else {
                    sh[i + 1].classList.add("show");
                }

            })
            hammertnav.on("swiperight", function () {
                if (i + 2 != 3||i + 1 != 5) {
                    tnav.classList.remove("swipeleft");
                }
                //顶部变化
                for (var j = 0; j < lm.length; j++) {
                    lm[j].classList.remove("tuijian");
                }
                if (i - 1 <= 0) {
                    lm[0].classList.add("tuijian");

                } else {
                    lm[i - 1].classList.add("tuijian");
                }
                //内容变化
                for (var k = 0; k < lm.length; k++) {
                    sh[k].classList.remove("show");
                }
                if (i - 1 <= 0) {
                    sh[0].classList.add("show");
                } else {
                    sh[i - 1].classList.add("show");
                }
            })
        }

        var hott = document.querySelector(".hott");
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //xmlhttp.responseText;
                //你的ajax代码写在这里，其他位置除了open的前两个参数都不需要也不要改变。
                //ajax加载成功之后的代码执行位置
                var data = JSON.parse(xmlhttp.responseText);
                var box = document.querySelector(".box");
                data.forEach(function (v, i) {
                    var nwli = document.createElement("li");
                    nwli.innerHTML = `
                        <a href="${v.link}">
                            <img src="${v.img}" alt="">
                            <div class="text">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-bofangqi-bofangxiaodianshi"></use>
                                </svg>
                                <span>${v.thumbsupnum}</span>
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-pinglun2"></use>
                                </svg>
                                <span>${v.contentnum}</span>
                                <span>${v.time}</span>
                            </div>
                            <p>${v.title}</p>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-UPzhu"></use>
                            </svg>
                            <span>${v.upname}</span>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gengduo1"></use>
                            </svg>
                        </a>`;
                    box.appendChild(nwli);
                    var xmlhttp1;
                    if (window.XMLHttpRequest) {
                        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                        xmlhttp1 = new XMLHttpRequest();
                    } else {
                        // IE6, IE5 浏览器执行代码
                        xmlhttp1 = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xmlhttp1.onreadystatechange = function () {
                        if (xmlhttp1.readyState == 4 && xmlhttp1.status == 200) {
                            //xmlhttp.responseText;
                            //你的ajax代码写在这里，其他位置除了open的前两个参数都不需要也不要改变。
                            //ajax加载成功之后的代码执行位置
                            var json = JSON.parse(xmlhttp1.responseText);
                            json.forEach(function (v, i) {
                                var ndiv = document.createElement("div");
                                ndiv.className = "bg";
                                ndiv.innerHTML = `
            <div class="wrapper">
                <div class="image">
                    <img src="${v.img}" alt="${v.tar}">
                    <div class="time">${v.time}</div>
                </div>
                <div class="content">
                    <p class="tar">${v.tar}</p>
                    ${v.tag}
                    <div class="up">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-UPzhu"></use>
                        </svg>
                        <p>${v.upname}</p>
                    </div>
                    <ul class="play">
                        <li>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-bofangshu"></use>
                            </svg>
                        
                            <p>${v.playnum}</p>
                        </li>
                        <li>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gengduo1"></use>
                            </svg>
                        </li>
                    </ul>
                </div>
            </div>`;
                                hott.appendChild(ndiv);
                            });
                            //只有用http的方式查看网页的运行结果才可以避免用本地网页的方式查看ajax运行结果。
                            //vs code中可以使用liver server，post请求用专业的HTTP服务器
                        }
                    }
                    xmlhttp1.open("GET", "http://rap2api.taobao.org/app/mock/295104/FQ/bilibili6", true);
                    xmlhttp1.send();
                });
                //只有用http的方式查看网页的运行结果才可以避免用本地网页的方式查看ajax运行结果。
                //vs code中可以使用liver server，post请求用专业的HTTP服务器
            }
        }
        xmlhttp.open("GET", "http://rap2api.taobao.org/app/mock/295104/FQ/bilibili1", true);
        xmlhttp.send();


        
    </script>

</body>

</html>